<template>
  <div>
    <div class="margin-container-list radius-container">
      <div class="border-b pad-10 font-w font-15 clearfix topbar-style">
        <span class="fl mar-l-10">分发信息</span>
        <span class="fl mar-l-10">分发编码:</span>{{ share.contentCode }}
        <span class="fr mar-r-10">
          <template v-if="share.status == '3'">
            <span v-if="share.startTime">距离任务截止还有<span class="font-blue pad-l-5 pad-r-5">{{ this.signNem }}</span>天</span>
          </template>
          <template v-else>
            <template>
              <span class="mar-r-20 note-key font-26">{{ statuss[share.status] }}</span>
            </template>
          </template>
        </span>
      </div>
      <div class="pad-20">
        <el-form ref="form" :model="share" label-width="120px" class="layer-relation">
          <div class="layer-btn">
            <template v-if="share.status == '3'">
              <el-button type="danger" @click="buttonClickStop">结束任务</el-button>
            </template>
            <template v-if="share.status != '4'">
              <el-button type="primary" @click="buttonClickSign" v-if="share.startTime">修改任务周期</el-button>
              <el-date-picker v-if="dateSign"
                              v-model="starEndTimeSign"
                              type="daterange"
                              align="right"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              unlink-panels
                              value-format="yyyy-MM-dd"
                              @change="changeDateTimeSign">
              </el-date-picker>
            </template>
          </div>
          <el-form-item label="分发名称:">
            {{ share.contentName }}
            <!--<el-button type="primary" @click="buttonClickDetails">查看文章详情</el-button>-->
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="分发酬金:">
                <template v-if="share.amount">
                  {{ share.amount + '元人民币' }}
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="targetReadingName">
                <template v-if="share.targetReading">
                  {{ share.targetReading }}
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="剩余酬金:">
                <template v-if="share.shareBalance">
                  {{ share.shareBalance + '元人民币' }}
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="surplusTargetReadingName">
                {{ share.targetReading - share.surplusTargetReading }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="readPeopleNumName">
                {{ share.readPeopleNum }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="share.remark">
            <el-col :span="6">
              <el-form-item label="驳回原因:">
                  {{ share.remark }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="margin-container-list radius-container" v-if="share.settleType === 1">
      <el-tabs v-model="activeName">
        <el-tab-pane label="阅读记录" name="2"></el-tab-pane>
        <el-tab-pane label="分享排名" name="1"></el-tab-pane>
      </el-tabs>
      <template v-if="activeName == '2'">
        <read :contentId="contentId" :unitPrice="unitPrice"></read>
      </template>
      <template v-if="activeName == '1'">
        <share :contentId="contentId" :unitPrice="unitPrice"></share>
      </template>
    </div>
    <div class="margin-container-list radius-container"  v-if="share.settleType === 2">
      <el-tabs v-model="shareFromActive">
        <el-tab-pane label="分发记录" name="1"></el-tab-pane>
        <el-tab-pane label="排行榜" name="2"></el-tab-pane>
        <el-tab-pane label="提交记录" name="3"></el-tab-pane>
      </el-tabs>
      <template v-if="shareFromActive == '1'">
        <share-form :contentId="contentId"></share-form>
      </template>
      <template v-if="shareFromActive == '2'">
        <share-ranking-list :contentId="contentId"></share-ranking-list>
      </template>
      <template v-if="shareFromActive == '3'">
        <share-form-submit :contentId="contentId"></share-form-submit>
      </template>
    </div>
  </div>
</template>

<style scoped>
  .div-style {
    width: 12%;
    height: 100%;
    text-align: center;
    float: left;
    border-right: 1px solid #99a9bf;
  }
  .div-border-top {
    border-top: 1px solid #999999;
    height: 50px;
  }
  a {
    color: #1e6abc;
  }
  /* span {
    font-size: 20px;
  } */
  .span-size {
    color: red;
    font-size: 40px;
    margin-left: 70%;
  }
  .span-size-20 {
    color: #0a76a4;
    font-size: 20px;
    margin-left: 50%;
  }
  .layer-relation{
    position: relative;
  }
  .layer-btn{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
  }
  .note-key{
    color: #DB5557;
  }
  .note-key-70{
    color: #09BB07!important;
  }
</style>

<script>
  import { getShare, endShare, updateShareDate } from '@/api/content/share'
  import { getDictByGroupName } from '@/api/common/common'
  import Read from '@/views/content/share/detail/Read'
  import Share from '@/views/content/share/detail/Share'
  import ShareForm from '@/views/content/share/detail/ShareForm'
  import ShareRankingList from '@/views/content/share/detail/ShareRankingList'
  import ShareFormSubmit from '@/views/content/share/detail/ShareFormSubmit'
  // 任务信息
  export default {
    components: {
      Read,
      Share,
      ShareForm,
      ShareRankingList,
      ShareFormSubmit
    },
    data() {
      return {
        statuss: [],
        activeName: '2',
        shareFromActive: '1',
        targetReadingName: '目标阅读量:',
        surplusTargetReadingName: '有效阅读量:',
        readPeopleNumName: '累计阅读人数:',
        status: '',
        unitPrice: '',
        contentId: '',
        dateSign: false,
        starEndTimeSign: [],
        experienceNames: [],
        signNem: '0',
        time: '',
        share: {
          contentId: '',
          contentCode: '',
          contentName: '',
          targetReading: 1,
          surplusTargetReading: 1,
          createTime: '',
          updateTime: '',
          status: '',
          contentArticleId: '',
          amount: '',
          startTime: '',
          endTime: '',
          enterpriseId: '',
          delFlag: '',
          readNum: 0,
          readPeopleNum: 0,
          contentShelf: '',
          unitPrice: '',
          shareBalance: ''
        }
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.contentId) {
        this.contentId = queryParams.contentId
      }
      this.initShareList()
      this.activeName = '2'
      this.shareFromActive = '1'
    },
    methods: {
      initShareList() {
        getShare(this.contentId).then(response => {
          if (response.isError) return
          this.share = response.data
          this.unitPrice = response.data.unitPrice
          if (this.share.endTime) {
            this.signNem = this.timeCalculation(new Date(), this.share.endTime)
          }
          if (response.data.settleType === 1) {
            this.targetReadingName = '目标阅读量:'
            this.surplusTargetReadingName = '有效阅读量:'
            this.readPeopleNumName = '累计阅读人数:'
          }
          if (response.data.settleType === 2) {
            this.targetReadingName = '目标提交量:'
            this.surplusTargetReadingName = '当前提交量:'
            this.readPeopleNumName = '累计提交人数:'
          }
        })
        getDictByGroupName('ShareDTO').then(response => {
          if (response.isError) return
          this.statuss = response.data.status
        })
      },
      buttonClickDetails() {
        this.$router.push({ path: '/content/distributeArticle/edit/index', query: { contentId: this.contentId }})
      },
      buttonClickSign() {
        this.dateSign = true
        if (this.share.startTime) {
          this.starEndTimeSign[0] = this.share.startTime.split(' ')[0]
        }
        if (this.share.endTime) {
          this.starEndTimeSign[1] = this.share.endTime.split(' ')[0]
        }
        this.signNem = this.timeCalculation(new Date(), this.share.endTime)
      },
      // 结束项目
      buttonClickStop() {
        this.$confirm('是否中止项目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 更改任务状态
          endShare(this.contentId).then(response => {
            if (response.isError) return
            this.$message({
              type: 'success',
              message: '成功!'
            })
            this.initShareList()
          })
        }).catch(() => {
        })
      },
      changeDateTimeSign() {
        this.$confirm('修改报名时间将有可能影响微客的正常报名是否确认修改？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.share.startTime = this.starEndTimeSign[0] + ' 00:00:00'
          this.share.endTime = this.starEndTimeSign[1] + ' 23:59:59'
          // 更改时间
          updateShareDate(this.share).then(response => {
            if (response.isError) return
            this.$message({
              type: 'success',
              message: '更改成功!'
            })
            this.dateSign = false
            this.taskReset()
            this.initShareList()
          })
        }).catch(() => {
          this.dateSign = false
        })
      },
      // 时间计数
      timeCalculation(time, endTime) {
        const startTime = this.timeFormat(time)
        const date2 = endTime.split(' ')[0].split('-')
        const date1 = startTime.split(' ')[0].split('-')
        const odate2 = new Date(date2[1] + '-' + date2[2] + '-' + date2[0])
        const odate1 = new Date(date1[1] + '-' + date1[2] + '-' + date1[0])
        return parseInt(Math.abs(odate2 - odate1) / 1000 / 60 / 60 / 24)
      },
      timeFormat(date) {
        const year = date.getFullYear()
        let mounth = date.getMonth() + 1
        let day = date.getDate()
        if (mounth < 10) {
          mounth = '0' + mounth
        }
        if (day < 10) {
          day = '0' + day
        }
        return year + '-' + mounth + '-' + day + ' 00:00:00'
      }
    },
    mounted() {
    }
  }
</script>
